<template>
    <div>
        <van-search v-model="valuess" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />
        <div class="box" v-show="ym">
            <div class="rm">
                <h4>搜索历史</h4>
                <van-tag round type="primary">智利甘露</van-tag>
                <van-tag round type="primary">自行车</van-tag>
            </div>
            <div class="rm">
                <h4>搜索发现</h4>
                <van-tag round type="primary">智利甘露</van-tag>
                <van-tag round type="primary">自行车</van-tag>
                <van-tag round type="primary">进口红酒</van-tag>
                <van-tag round type="primary">纸巾小包</van-tag>
                <van-tag round type="primary">笔记本电脑包</van-tag>
            </div>
        </div>
        <div class="bom" v-show="!ym" >
            <van-cell-group >
                <van-cell :title="item.goods_name" v-for="item in searchApiData"/>
            </van-cell-group>
        </div>
        <van-empty description="描述文字" v-show="ll" />
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { searchApi } from '@/api/api';
let searchApiData = ref([])
let ym = ref(true)
let ll = ref(false)
let valuess = ref('')
watch(valuess, (val) => {
    if (val.length == 0) {
        ym.value = true
        ll.value = false
    } else {
        ym.value = false
        searchApi(val).then(res => {
            searchApiData.value = res.data.message
            console.log(res.data.message);
            if(searchApiData.value==0){
                ll.value = true
            }else{
                ll.value = false
            }
        })
    }
})

</script>

<style scoped>
.van-tag {
    margin: 10px;
    height: 30px;
    background-color: #ddd;
    color: #000;
}
</style>